<template>
	<view class="container">
		<z-paging-swiper>
			<view slot="top">
				<u-navbar height="50" back-icon-color="#333" title="评价" title-color="#333" :border-bottom="false"
					title-size="36">
				</u-navbar>
				<view class="tabsView">
					<u-tabs-swiper ref="uTabs" :list="tabsList" :current="current" @change="tabsChange"
						:is-scroll="false" active-color="#333" swiper-width="750">
					</u-tabs-swiper>
				</view>
			</view>
			<swiper class="swiper" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<swiper-item class="swiper-item">
					<z-paging ref="paging" v-model="itemList" @query="queryList" :fixed="false" :auto="false"
						empty-view-img="/static/empty.png" empty-view-text="暂无数据~" :empty-view-img-style="imgStyle">
						<view class="itemView" v-for="(item,index) in itemList" :key="index">
							<view class="goodsView">
								<u-image width="150rpx" height="150rpx" border-radius="10"
									:src="item.goods_sku_cover_format" v-if="item.goods_is_open_spec == 1">
								</u-image>
								<u-image width="150rpx" height="150rpx" border-radius="10"
									:src="item.goods_images_format[0]" v-else></u-image>
								<view class="goodsData">
									<text class="goodsTitle">{{item.goods_name}}</text>
									<view class="skuView">
										<text class="goodsSku" style="flex: 1;">{{showGoodsSku(item.goods_skus)}}</text>
										<text class="goodsNum">x{{item.goods_number}}</text>
									</view>
									<view class="goodsPrice" v-if="item.goods_is_open_spec == 1">
										¥{{item.goods_sku_price}}</view>
									<view class="goodsPrice" v-else>¥{{item.goods_price}}</view>
								</view>
							</view>
							<view class="orderView">
								<!-- <view class="orderTime">收货时间：{{item.ship_time}}</view> -->
								<view class="orderBtn" @click="onOrderComment(item)">立即评价</view>
							</view>
						</view>
					</z-paging>
				</swiper-item>
				<swiper-item class="swiper-item">
					<z-paging ref="paging2" v-model="itemList2" @query="queryList2" :fixed="false" :auto="false"
						empty-view-img="/static/empty.png" empty-view-text="暂无数据~" :empty-view-img-style="imgStyle">
						<view class="itemView" v-for="(item,index) in itemList2" :key="index">
							<view class="goodsView">
								<u-image width="150rpx" height="150rpx" border-radius="10"
									:src="item.goods_sku_cover_format" v-if="item.goods_is_open_spec == 1">
								</u-image>
								<u-image width="150rpx" height="150rpx" border-radius="10"
									:src="item.goods_images_format[0]" v-else></u-image>
								<view class="goodsData">
									<text class="goodsSku u-line-1">{{item.goods_name}}</text>
									<view class="skuView" v-if="item.appraise">
										<text class="goodsSku">商品评价:</text>
										<u-rate :size="25" :count="5" v-model="item.appraise.goods_star"></u-rate>
									</view>
									<view class="goodsTitle u-line-2" v-if="item.appraise">{{item.appraise.content}}</view>
								</view>
							</view>
						</view>
					</z-paging>
				</swiper-item>
			</swiper>
		</z-paging-swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgStyle: {
					width: '12rem'
				},
				current: 0,
				swiperCurrent: 0,
				tabsList: [{
					name: '待评价'
				}, {
					name: '已评价'
				}],
				itemList: [],
				itemList2: [],
			}
		},
		onShow() {
			let self = this;
			this.$nextTick(function() {
				self.$refs.paging.reload();
			});
		},
		methods: {
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				if (this.current != current) {
					this.onOrderLoad(current, null, true);
				}
				this.swiperCurrent = current;
				this.current = current;
			},
			queryList(page, pageSize) {
				this.initData(page, pageSize, 0);
			},
			queryList2(page, pageSize) {
				this.initData(page, pageSize, 1);
			},
			initData(page, pageSize, status) {
				let self = this;
				self.$user.orderGoodsList({
					limit: pageSize,
					page: page,
					is_appraise: status
				}, true).then(res => {
					console.log(JSON.stringify(res, null, 2));
					self.onOrderLoad(self.current, res.list, false);
				}).catch(res => {
					self.onOrderLoad(self.current, null, false);
				});
			},
			onOrderLoad(current, orderList, loading) {
				let self = this;
				switch (current) {
					case 0:
						if (loading) {
							self.$refs.paging.reload();
						} else {
							self.$refs.paging.complete(orderList);
						}
						break;
					case 1:
						if (loading) {
							self.$refs.paging2.reload();
						} else {
							self.$refs.paging2.complete(orderList);
						}
						break;
				}
			},
			showGoodsSku(goods_skus) {
				if (goods_skus) {
					let skuList = []
					let goodsSku = JSON.parse(goods_skus);
					goodsSku.forEach(item => {
						skuList.push(item.name);
					});
					return skuList.join(',');
				}
				return '';
			},
			onOrderComment(item) {
				if (item.goods_is_open_spec == 1) {
					let path = 'goods_id=' + item.id + '&goods_name=' + item.goods_name +
						'&goods_image=' + item.goods_sku_cover_format;
					this.$utils.jump('/page/order-comment/order-comment?' + path);
				} else {
					let path = 'goods_id=' + item.id + '&goods_name=' + item.goods_name +
						'&goods_image=' + item.goods_images_format[0];
					this.$utils.jump('/page/order-comment/order-comment?' + path);
				}
			},
		}
	}
</script>

<style>
	@import url('order-comment-list.css');

	page {
		background: #f5f5f5;
	}
</style>
